@import "~taro-ui/dist/style/components/tabs.scss";
@import "~taro-ui/dist/style/components/grid.scss";
@import "~taro-ui/dist/style/components/flex.scss";
:root{
  --nutui-grid-item-content-bg-color: transparent;
  --nutui-grid-border-color: transparent;
}
.wrapper{
  position: relative;
  background: linear-gradient(to bottom, #f0f9ff, #f5f5f5 30%);
}
.container {
  position: relative;
  box-sizing: border-box;
  transition: all .3s;
  z-index: 1;
  padding: 15rpx;
  & .top-bar{
    display: flex;
    margin-bottom: 8rpx;
    & .avatar{
      border: 2PX solid $mainColor;
    }
    & .search-input{
      flex: 1;
    }
    & .nut-avatar{
      margin-left: 6PX;
    }
  }
}
.carousel{
  margin-bottom: 24rpx;
}
.hot{
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
  &-top{
    width: 100%;
    height: 40%;
    border-radius: 10rpx;
    border: 1rpx solid #f1f1f1;
  }
  &-bottom{
    width: 100%;
    height: 58%;
    border-radius: 10rpx;
  }
}

.mask-1{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  opacity: 0;
  animation: Fade .8s linear;
}


@keyframes Fade {
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}
